
body {
    max-width: 640px;
    margin: 0 auto;
    background: #f7f7f7;
    font-size:18px
}

@media only screen and (max-width:310px) and (min-width:300px){body{font-size:10px}}
@media only screen and (max-width:320px) and (min-width:310px){body{font-size:10px}}
@media only screen and (max-width:360px) and (min-width:320px){body{font-size:12px}}
@media only screen and (max-width:360px) and (min-width:350px){body{font-size:12px}}
@media only screen and (max-width:480px) and (min-width:360px){body{font-size:14px}}
@media only screen and (max-width:480px) and (min-width:470px){body{font-size:14px}}
@media only screen and (max-width:560px) and (min-width:480px){body{font-size:16px}}
@media only screen and (max-width:570px) and (min-width:560px){body{font-size:16px}}
@media only screen and (max-width:640px) and (min-width:570px){body{font-size:18px}}
@media only screen and (max-width:640px) and (min-width:630px){body{font-size:18px}}



h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

img {
    vertical-align: middle;
}

a, a:link, a:active, a:hover, a:visited {
    color: #555;
    text-decoration: none;
}

.con {
    background: #f7f7f7;
}